<!-- 列表 -->
<template>
  <div class="home-list-page" v-infinite-scroll="loadMore">
    <div class="flex" v-if="tabShow">
      <div
        v-for="(value, index) in tabsData"
        :key="index"
        class="title-box"
        @click="changeTabs(index, value.type)"
      >
        <div class="top-title">{{ value.title }}</div>
        <div :class="current == index ? 'active' : 'bottom-desc'">
          {{ value.desc }}
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="flex-wrap">
      <div
        class="shop-bt-box"
        @click="goGoods(value.goods_id)"
        v-for="(value, index) in homeList"
        :key="index"
      >
        <img :src="value.goods_img" alt="" />
        <div class="shop-desc">
          {{ value.title }}
        </div>
        <div class="shop-price">{{ value.shop_price }}</div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { homeListApi } from "@/api/home";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["tabShow"],
  data() {
    //这里存放数据
    return {
      tabsData: [
        {
          id: "4",
          title: "精选",
          desc: "为你推荐",
          type: "is_best",
        },
        {
          id: "5",
          title: "社区",
          desc: "新奇好物",
        },
        {
          id: "6",
          title: "新品",
          desc: "潮流上新",
          type: "is_new",
        },
        {
          id: "7",
          title: "热卖",
          desc: "火热爆款",
          type: "is_hot",
        },
      ],
      active: "active",
      current: 0,
      page: 1,
      size: 10,
      type: "is_best",
      homeList: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goGoods(id) {
      this.$router.push({ name: "goodsdetail", params: { goods_id: id } });
      this.$store.dispatch("actChangeDetailData", {
      goods_id: this.$route.params.goods_id,
    });
    },
    changeTabs(index, type) {
      this.current = index;
      this.type = type;
      this.page = 1;
      this.homeList = [];
      this.shopListData();
    },
    shopListData() {
      homeListApi({
        page: this.page,
        size: this.size,
        type: this.type,
      }).then((res) => {
        this.homeList = this.homeList.concat(res.data.data);
      });
    },
    loadMore() {
      this.page++;
      this.shopListData();
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.shopListData();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.home-list-page {
  .flex {
    margin: 2rem 1rem 0rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    .title-box {
      border-right: 0.1rem solid #ccc;
      flex: 1;
    }
    .top-title {
      font-size: 1.6rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    .bottom-desc {
      width: 7rem;
      margin-left: 1rem;
      font-size: 1.2rem;
      color: #666;
    }
    .active {
      width: 7rem;
      margin-left: 1rem;
      font-size: 1.2rem;
      color: white;
      background-color: #f54;
      border-radius: 1rem;
    }
    .title-box:nth-child(4) {
      border-right: none;
    }
  }
  .flex-wrap {
    padding: 0.5rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    margin-top: -1rem;
    .shop-bt-box {
      height: 23rem;
      border-radius: 1rem;
      background-color: #fff;
      margin-top: 4rem;
      img {
        border-radius: 1rem;
        width: 17rem;
        height: 17rem;
      }
      .shop-desc {
        width: 17rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-top: 1rem;
        font-size: 1.5rem;
      }
      .shop-price {
        font-size: 1.6rem;
        font-weight: bold;
        margin-top: 1rem;
        color: red;
        &::before {
          content: "￥";
        }
      }
    }
  }
}
</style>